<template>
  <div style="width: 100%; height: 100%; background-color: white;">
  <div style="width: 98%; height: 100%; background-color:white;">
    <div style="width:96%; height: 95%; background-color:  white;">
      <el-row>
        <el-col :span="8" :offset="16">
          校&nbsp&nbsp&nbsp&nbsp区:&nbsp&nbsp<el-select style="width: 270px;">
            <el-option>
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row style="margin-top: -10px;">
        <el-col :span="8" :offset="4" style="width: 400px; height: 230px;">
          <div style="width:100%; height: 100%; margin-top: 10px;"><Im v-if="refresh"></Im></div>
      </el-col>
      <el-col :span="8" :offset="4" style="width: 300px; height: 180px;">
          <div  style="width:100%; height: 100%;"></div>
      </el-col>
      </el-row>
      <el-row style="margin-top: 10px;">
        <el-col :span="24">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" size="mini" style="width: 100%;">
            <el-menu-item index="1" @click="findByCount()">课程收入</el-menu-item>
            <el-menu-item index="2" @click="findByGrounp()">商品收入</el-menu-item>
            <el-menu-item index="3" @click="findByQita()">其他收入</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
      <div v-if="re">
      <el-row>
        <el-col :span="24">
          <template>
                <el-table
                    :data="orderlist"
                    border
                    stripe
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="handleSelectionChange">

                    <el-table-column
                    width="60"
                            prop="id"
                            label="序号"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="master"
                            label="班级名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="老师"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="money"
                            label="课程订单实收"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="money2"
                            label="组合包订单实收"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="master"
                            label="任意上课实收"
                            align="center">
                    </el-table-column>

                </el-table>
            </template>
        </el-col>
      </el-row>
    </div>
      <div v-if="ref">
      <el-row>
        <el-col :span="24">
          <template>
                <el-table
                    :data="orderlist"
                    border
                    stripe
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="handleSelectionChange">

                    <el-table-column
                            prop="name"
                            label="商品名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="number"
                            label="销售量"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="money"
                            label="实收"
                            align="center">
                    </el-table-column>
                </el-table>
            </template>
        </el-col>
      </el-row>
    </div>
    <div v-if="shixin">
      <el-row>
        <el-col :span="24">
          <template>
                <el-table
                    :data="orderlist"
                    border
                    stripe
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                            prop="id"
                            label="序号"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="remark"
                            label="收入名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="money"
                            label="收入金额"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="time"
                            label="时间"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            >
                        <template slot-scope="scope">
                            <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
                            <el-button type="info" size="mini" @click="addByOutPut(scope.row)">添加收入</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-col>
      </el-row>
    </div>
    </div>
    </div>
    <el-dialog
            title="支出类型设置"
            :visible.sync="dialogVisibles"
            width="35%"
            :before-close="handleClose">
        <el-form :model="orderlist" ref="feeStarand" label-width="100px" class="demo-feeStarand">
            <el-form-item label="添加支出类型:" prop="name">
                <el-input style="width: 200px; margin-right: 200px;" v-model="type" size="small"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibles = false">取 消</el-button>
    <el-button type="primary" @click="update1()">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog
            title="添加收入"
            :visible.sync="dialogVisible"
            width="35%"
            :before-close="handleClose">
        <el-form :model="orderlist" ref="feeStarand"  label-width="100px" class="demo-feeStarand">
            <el-form-item label="收入名称:" prop="name">
              <el-input style="width: 200px; margin-left: -190px;" v-model="remark" size="small"></el-input>
            </el-form-item>
            <el-form-item label="收入金额:" prop="name">
              <el-input style="width: 200px; margin-left: -190px;" v-model="money" size="small"></el-input>
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="orderupdate()">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import echarts from 'echarts'
import Im from '../components/im'
  export default{
    components:{
      Im
    },
    data(){
      return{
        shixin:false,
        re:true,
        refresh: true,
        ref:false,
        type:"",
        time:"",
        remark:"",
        money:"",
        master:"",
        dialogVisibles:false,
        value3:"",
        name:"",
        option1ss: [{
          value3: '支付宝',
          label: '支付宝'
        }, {
          value3: '微信',
          label: '微信'
        }, {
          value3: '现金',
          label: '现金'
        }],
        scope:"",
        index: 0,
        dialogVisible:false,
        value3:"",
        multipleSelection:[],
        options: [],
        value:"",
        orderlist:[
        {
          id: '1',
          name: '王茜茜老师',
          master: '小提琴班',
          money:'1500',
          money2:'1000'
        }, {
          id: '2',
          name: '孙骁骁老师',
          master: '中国舞班',
          money:'900',
          money2:'900'
        }, {
          id: '3',
          name: '季南老师',
          master: '街舞班',
          money:'1100',
          money2:'1000'
        }, {
          id: '4',
          name: '苏千千老师',
          master: '古典舞班',
          money:'0',
          money2:'0'
        }
        ],
        orderlistss:[
        {
          name: '芭蕾舞鞋',
          number: '10',
          money:'1000',
        }, {
          name: '服装',
          number: '8',
          money:'1600',
        }, {
          name: '裤子',
          number: '6',
          money:'1200',
        }
        ],
        orderlists:[
        {
          id: '1',
          name: '王茜茜老师',
          master: '小提琴班',
          money:'1500',
          money2:'1000'
        }, {
          id: '2',
          name: '孙骁骁老师',
          master: '中国舞班',
          money:'900',
          money2:'900'
        }, {
          id: '3',
          name: '季南老师',
          master: '街舞班',
          money:'1100',
          money2:'1000'
        }, {
          id: '4',
          name: '苏千千老师',
          master: '古典舞班',
          money:'0',
          money2:'0'
        }
        ],
        name: '',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2:'',
        option1s: [{
          value2: '未结清',
          label: '未结清'
        }, {
          value2: '已结清',
          label: '已结清'
        }, {
          value2: '已退费',
          label: '已退费'
        }],
      };
    },

  mounted() {
    this.initChart()
    this.initChart2()
  },
  methods: {
    refreshComp() {
            // 移除组件
            this.refresh = false
            // 在组件移除后，重新渲染组件
            // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
            this.$nextTick(() => {
                this.refresh = true
            })
        },
    addByOutPut(){
      this.dialogVisible = true
    },
    addByOutPutType(){
      this.dialogVisibles = true
    },
    excel111(){
      window.location.href="http://localhost:8082/orders/downloadexcel1"
      this.$message.success("导出成功!")
    },
    findByOrderType(){
      this.index = 3
      this.find1()
      this.$message.success("查询成功!")
    },
    find1(){
      this.$axios.get("orders/findByOutPut/"+this.value).then(res=>{
        if(res.data.code == 200){
          this.orderlist = res.data.data
          this.value = ""
        }
      })
    },
    findByTime(){
      this.index = 6
      this.find4()
    },
    find4(){
      let data = {
          starttime: this.dateToString(this.value3[0]),
          lasttime: this.dateToString(this.value3[1])
      }
      alert(data.starttime)
      alert(data.lasttime)
      this.$axios.post("orders/findByOutPutTime",data).then(res=>{
        if(res.data.code == 200){
          this.orderlist = res.data.data
          this.$message.success("查询成功!")
          this.value3 = ""
        }
      })
    },
    dateToString: function (date) {
                var year = date.getFullYear();
                var month = (date.getMonth() + 1).toString();
                var day = (date.getDate()).toString();
                if (month.length == 1) {
                    month = "0" + month;
                }
                if (day.length == 1) {
                    day = "0" + day;
                }
                var dateTime = year + "-" + month + "-" + day;
                return dateTime;
            },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    findByCount(){
      this.shixin = false
      this.re = true
      this.ref = false
      this.orderlist  = this.orderlists
    },
    findByGrounp(){
      this.shixin = false
      this.re = false
      this.ref = true
      this.orderlist = this.orderlistss
    },
    findByQita(){
      this.index = 3
      this.shixin = true
      this.re = false
      this.ref = false
      this.$axios.get("/orders/findByQita").then(res => {
      console.log(res.data.data)
      this.orderlist = res.data.data
    })
    },
    findByDeleteOrder(){
      this.$axios.get("/orders/findByDeleteOrder").then(res => {
      console.log(res.data.data)
      this.orderlist = res.data.data
      console.log(this.orderlist)
    })
    },
    ifback(backid){
      if(backid == 1){
        return true
      }else{
        return false
      }
    },
    del(scope){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          this.$axios.delete("/orders/delByInputId/"+scope.id).then(res=>{
          if(res.data.code == 200){
          this.$message.success("删除成功")
          this.findByQita()
          this.refreshComp()
        }
      })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
    },
    backmoney(scope){
      this.scope = scope.row
      this.dialogVisibles = true
      this.$axios.get("/orders/findByTimes/"+this.scope.userid).then(res=>{
        if(res.data.code == 200){
          this.times = 10 - res.data.data
        }
      })
    },
    update1(){
      this.$axios.get("/orders/addOutPutType/"+this.type).then(res => {
      if(res.data.code == 200){
        this.$message.success("添加成功")
        this.type = ""
        this.findByType()
        this.dialogVisibles = false
      }
    })
    },
    getmoney(scope){
      this.scope = scope.row
      console.log(scope)
      this.orderlist[0].lastpayment = this.scope.lastpayment
      this.dialogVisible = true
    },
    orderupdate(){
      console.log(this.value)
      let data = {
        money:this.money,
        remark:this.remark,
      }
      this.$axios.post("/orders/addByOutPutCp",data).then(res => {
      if(res.data.code == 200){
        this.$message.success("添加成功")
        this.money = ""
        this.remark = ""
        this.time = ""
        this.findByQita()
        this.refreshComp()
        this.dialogVisible = false
      }

    })
    },
    ifbacks(backid){
      if(backid == 2){
        return true
      }else{
        return false
      }
    },
    initChart() {
      const chart = echarts.init(document.getElementById('chart'))
      const option = {
        title: {

        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['销量']
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六','周七']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '订单金额',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20,30]
          }
        ]
      }
      chart.setOption(option)
    },
    detal(scope){
      console.log(scope)
    },

    initChart2() {
      const chart = echarts.init(document.getElementById('chart1'))
      const option = {
        title: {

        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['销量']
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六','周七']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '订单金额',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20,30]
          }
        ]
      }
      chart.setOption(option)
    },
    gotodetail(scope){
      console.log(scope)

      this.$router.push({
        name: 'Orderdetail',
        params:{
          orderdetail:scope
        }
      })
    },
    findByOrders(){
      this.$axios.get("/orders/findByOutputMoney").then(res => {
      console.log(res.data.data)
      this.orderlist = res.data.data
      console.log(this.orderlist)

    })
    },
    findByType(){
      this.$axios.get("/orders/findByType").then(res => {
      console.log(res.data.data)
      this.options = res.data.data
      console.log(this.options)

    })
    }
  },
  mounted() {

  }
}
</script>

<style scoped>
</style>
